/* ------------------------------------------------------------------------------
*
*  # Stepy wizard
*
*  jQuery plugin which generates a customizable wizard from form fieldsets
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */

// Core
// ------------------------------

.stepy-step {
  padding: @content-padding-large;
  padding-top: 0;
}

// Header
// ------------------------------

.stepy-header {
  list-style: none;
  padding: 0;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;

  // Add top border if inside flat panel
  .panel-flat > & {
    border-top: 1px solid @panel-default-border;
  }

  // Nav list item
  li {
    cursor: pointer;
    display: table-cell;
    vertical-align: top;
    width: auto;
    padding: @content-padding-large 0;
    text-align: center;
    position: relative;

    // Step nav text label
    span {
      display: block;
      margin-top: 10px;
      color: @text-muted;
    }

    // Line indicator
    &:before,
    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 43px;
      width: 50%;
      height: 2px;
      background-color: @brand-info;
      z-index: 9;
    }
    &:before {
      left: 0;
    }
    &:after {
      right: 0;
    }
    &:first-child:before,
    &:last-child:after {
      content: none;
    }

    // Number indicator
    div {
      background-color: @brand-info;
      font-size: 0;
      position: relative;
      color: #fff;
      margin-left: auto;
      margin-right: auto;
      width: 38px;
      height: 38px;
      border: 2px solid @brand-info;
      z-index: 10;
      line-height: 34px;
      text-align: center;
      border-radius: 50%;

      // Icon
      &:after {
        content: '\ed6c';
        font-family: 'icomoon';
        display: inline-block;
        font-size: @icon-font-size;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 34px;
        .transition(all 0.15s ease-in-out);
      }
    }

    // Active step
    &.stepy-active {
      &:after,
      ~ li:before,
      ~ li:after {
        background-color: #f5f5f5;
      }

      ~ li div {
        border-color: @gray-lighter;
        background-color: #fff;
        color: #ccc;
        font-size: 14px;

        &:after {
          content: none;
        }
      }

      // Icon container
      div {
        cursor: auto;
        border-color: @brand-info;
        background-color: #fff;
        color: @brand-info;

        &:after {
          content: '\e913';
        }
      }

      // Text label
      span {
        color: @text-color;
      }
    }
  }

  // Media queries
  @media (max-width: @screen-sm) {
    margin-bottom: @line-height-computed;

    // List item
    li {
      display: block;
      float: left;
      width: 50%;
      padding-bottom: 0;

      &:first-child:before,
      &:last-child:after {
        content: '';
      }
      &.stepy-active:last-child:after {
        background-color: @brand-info;
      }
    }
  }

  @media (max-width: @screen-xs) {

    // List item
    li {
      width: 100%;

      &.stepy-active:after {
        background-color: @brand-info;
      }
    }
  }
}

// Pagination
// ------------------------------

.stepy-navigator {
  text-align: right;

  .btn + .btn {
    margin-left: 5px;
  }
}
